<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    <link rel="stylesheet" href="editormd/lib/style.css">-->
    <link
            href="https://unpkg.com/md-editor-v3@2.2.0/lib/style.css"
            rel="stylesheet"
    />
    <link rel="stylesheet" href="/editormd/css/editormd.css">
    <link rel="stylesheet" href="/editormd/lib/style.css">
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script src="/editormd/lib/marked.min.js"></script>
    <script src="/editormd/lib/prettify.min.js"></script>
    <script src="/editormd/lib/raphael.min.js"></script>
    <script src="/editormd/lib/underscore.min.js"></script>
    <script src="/editormd/lib/sequence-diagram.min.js"></script>
    <script src="/editormd/lib/flowchart.min.js"></script>
    <script src="/editormd/lib/jquery.flowchart.min.js"></script>
    <script src="/editormd/editormd.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/marked/2.0.3/marked.js"></script>

    <!--    <script src="/js/vue-2.6.10.js"></script>-->
</head>
<body>
<div id="app">
    <div id="test-editormd" style="align-content: center">
        <textarea id="message" name="message" v-text="a"></textarea>
    </div>
    <!--    <button type="submit" onclick="app.add()">确定</button>-->
</div>
<!--<script src="https://unpkg.com/vue@3.2.31/dist/vue.global.prod.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/md-editor-v3@2.2.0/lib/md-editor-v3.umd.js"></script>
<script type="text/javascript">

    let app = new Vue({
        el: '#app',
        data() {
            return {
                article: {
                    columnid: '1',
                    columnname: 'Java',
                    userid: '1',
                    ispublic: '0',
                    istop: '0',
                    username: '廖仁宗',
                    title: 'Java文章',
                    image: 'http://124.222.69.186:9000/bishe/1.jpg',
                    url: 'www.baidu.com',
                    type: '1',
                    typename: '文章',
                    content: ''
                },
                a:''
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                let testEditor;
                $(function () {
                    testEditor = editormd("test-editormd", {
                        width: "90%",
                        height: 500,
                        // autoHeight : true,
                        path: "editormd/lib/",
                        watch: false,
                        preview: true,
                        toolbar: false,
                        readOnly: true,
                        editor: false,
                        imageUpload: true,
                        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                        imageUploadURL: "/upload",
                        onload: function () {
                            app.init();
                        }
                    });
                });
                axios.get("/article/13").then(res => {
                    console.log(res.data.data.content);
                    this.article.content = res.data.data.content;
                    // document.getElementById("message").innerHTML = marked(this.article.content)
                    // document.getElementById("message").
                    // testEditor.setMarkdown(res.data.data.content);
                    this.a = res.data.data.content;
                    testEditor.previewing();
                })
            }
        }
    });
</script>
</body>
</html>
